<div id="left" style="width:600px;padding: 0 10px 0 0;text-align:left">
<p><u><b>Equipment</b></u></p>
<table id="equipment_table" class="tablesorter">
<thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Size</th>
      <th>Description</th>
      <th>CategoryID</th>
      <th>Select</th>
    </tr>
</thead>
<% if @equip %>
<tbody style="height:150px;overflow:auto">
<% @equip.each do |eE| %>
    <tr>
        <td class="equip_id">
            <%= eE.id %>
        <td>
            <%= eE.name %>
        </td>
        <td>
            <%= eE.size %>
        </td>
        <td>
            <%= eE.description %>
        </td>
        <td>
            <%= eE.category %>
        </td>
        <td>
            <a href="#" onclick="addToCart(this)">Add</a>
        </td>
    </tr>
<% end %>
</tbody>
<tfoot>
    <tr>
        <th><input type="text" value="" size="5"/></th>
        <th><input type="text" value="" size="5"/></th>
        <th><input type="text" value="" size="5"/></th>
        <th><input type="text" value="" size="5"/></th>
        <th><input type="text" value="" size="5"/></th>
        <th></th>
    </tr>
</tfoot>
</table>

<% else %>
  <p>No equipment in database</p>
<% end %>
<input class="update_cart" type="submit" value="Finish">
</div>

<div id="or"></div>

<div id="right" style="width:375px;text-align:left;">
  <p><u><b>Cart</b></u></p>
  <table id="cart_table" class="tablesorter">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Size</th>
      <th>Description</th>
      <th>CategoryID</th>
      <th>Select</th>
    </tr>
</thead>
  <tbody style="height:150px;overflow:auto">

  </tbody>
  </table>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#equipment_table").tablesorter();

    $('.update_cart').click(function() {

      $("#equipment-table .equip_temp").each(function() {
      //alert($(this).find('.equip_temp_id').val());
          if($(this).find('.equip_temp_id').val() == '') {
            $(this).remove();
          }
      });

      $("#cart_table .equip_id").each(function() {
          //alert($(this).html());
          var temp = $("#hiding").html();
          $('#adder').before($("#hiding").html());
          $('#equipment-table .equip_temp_id:last').val($(this).html());
      });
      $('#equip_dialog').dialog('close');
    });

  });

    function addToCart(temp) {
            var item = '<tr>' + $($(temp).closest("tr")).html() + '</tr>';
            var newLink = "<a href='#' onclick='removeFromCart(this)'>Remove</a>";

            $("#cart_table").append(item);
            $("#cart_table").find('a').replaceWith(newLink);
            //$($(temp).closest("tr")).css('display', 'none');
            $("#cart_table").tablesorter();
    }

    function removeFromCart(temp) {
            //var newLink = "<a href='#' onclick='addToCart(this)'>Remove</a>";
            //$("#cart_table").find('a').replaceWith(newLink);
            $($(temp).closest("tr")).remove();
            //$("#equipment_table").find($(newLink).closest("tr")).css('display', 'visible');
          }


</script>

